<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://cdn.staticfile.org/vue/2.4.2/vue.js"></script>
	</head>
	<body>
		<diV id="app">
			<div :style="{ fontSize: postFontSize + 'em' }">
			<ccc v-for="post in posts"
                 v-bind:key="post.id"
                 v-bind:post="post"
                 v-on:enlarge-text="postFontSize += 0.1">
			</ccc>
			</div>
		</div>
		
		<script type="text/x-template" id="tem">
			<div> 
				<h3>{{ post.title }}</h3>
				<h3>{{post.id}}</h3>
				<button v-on:click="$emit('enlarge-text')">222222</button> </div>
		</script>
		
      <script type="text/javascript">
      	
      	Vue.component('ccc', {
  props: ['post'],
   template: '#tem',
}) 
     new Vue({
  el: '#app',
  data: {
  	
    posts: [
      { id: 1, title: 'My journey with Vue',content:'1111112111'},
      { id: 2, title: 'Blogging with Vue',content:'1111112111' },
      { id: 3, title: 'Why Vue is so fun' ,content:'1111112111'}
    ],
     postFontSize: 1
  }
  
})	
   </script>
		
	</body>
</html>
